<template>
  <div>
    <!-- <div v-if="breakShow" style="margin-bottom: 30px; cursor: pointer" @click="continueExam">

      <el-alert
        :closable="false"
        title="您有正在进行的考试，离线太久考试将被作废哦，点击此处可继续考试！"
        type="error"
      />

    </div> -->

    <el-tabs v-model="listQuery.params.examType" @tab-click="tabClick">
      <el-tab-pane name="1" label="正式考试" />
      <el-tab-pane name="2" label="模拟考试" />
    </el-tabs>

    <web-table ref="pagingTable" :options="options" :list-query="listQuery">
      <template #filter-content>
        <el-input v-model="listQuery.params.title" class="filter-item" placeholder="搜索考试名称" size="small" prefix-icon="el-icon-search" style="width: 200px" />

        <el-date-picker v-model="listQuery.params.dateRange" class="filter-item" size="small" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </template>

      <template #data-columns>
        <el-table-column label="考试名称" show-overflow-tooltip>
          <template v-slot="scope">
            <el-link type="primary" @click="showExam(scope)">{{ scope.row.title }}</el-link>
            <!--  <detail-link :id="scope.row.id" :title="scope.row.title" to="CheckExam" /> -->
          </template>
        </el-table-column>

        <!-- <el-table-column label="时长" align="center" prop="totalTime" width="120px" /> -->

        <el-table-column label="总分" align="center" prop="totalScore" width="120px" />

        <el-table-column label="及格分" align="center" prop="qualifyScore" width="120px" />

        <el-table-column label="考试时间" align="center" show-overflow-tooltip>
          <template v-slot="scope"> {{ scope.row.startTime }} ~ {{ scope.row.endTime }} </template>
        </el-table-column>

        <el-table-column label="考试状态" align="center" width="120px">
          <template v-slot="scope">
            <el-tag v-if="scope.row.state === '正常'" type="primary">进行中</el-tag>
            <el-tag v-else type="success">已结束</el-tag>
            <!-- <el-tag v-if="scope.row.state === 0" type="success">进行中</el-tag>
            <el-tag v-if="scope.row.state === 1" type="danger" disabled>已禁用</el-tag>
            <el-tag v-if="scope.row.state === 2" type="warning" disabled>未开始</el-tag>
            <el-tag v-if="scope.row.state === 3" disabled>已结束</el-tag> -->
          </template>
        </el-table-column>
      </template>
    </web-table>
  </div>
</template>

<script>
import { checkProcess } from '@/api/paper/exam'
import WebTable from '@/components/WebTable'
import DetailLink from '@/components/DetailLink'
import { mapGetters } from 'vuex'

export default {
  name: 'OnlineList',
  components: { DetailLink, WebTable },
  data() {
    return {
      detailData: {},
      listQuery: {
        current: 1,
        size: 10,
        params: {
          examType: '1'
        }
      },

      options: {
        // 列表请求URL
        listUrl: '/api/temp/exam/paging',
        // 考试题目展示的 dialog
        examQuShowDialog: false,
        examQuRecordShowDialog: false,
        // 考试 ID
        examId: 0
      },

      postForm: {
        examId: '',
        password: ''
      },

      breakShow: false,
      breakId: ''
    }
  },

  computed: {
    ...mapGetters(['siteData'])
  },

  created() {
    checkProcess().then(res => {
      if (res.data && res.data.id) {
        this.breakShow = true
        this.breakId = res.data.id
      }
    })
  },
  methods: {
    tabClick(tab, event) {
      console.log(tab.name)
      this.listQuery.params.examType = tab.name
      this.$refs.pagingTable.getList()
    },

    /**
     * 继续考试
     */
    continueExam() {
      this.$router.push({ name: 'StartExam', params: { id: this.breakId } })
    },

    // 展示考试
    showExam(scope) {
      if (scope.row.state === '正常') {
        this.options.examQuShowDialog = true
      } else {
        this.options.examQuRecordShowDialog = true
      }
      this.options.examId = scope.row.id
    }
  }
}
</script>
